<template>
  <section>
    <Table border :columns="columns1" :data="userList"></Table>
    <div style="overflow: hidden; position:absolute;bottom:20px;right:40px;">
      <div>
        <Page :total="total"
        :current.sync="page"
        :page-size="pageSize"
        show-total
        no-data-text="暂时没有用户"
        @on-change="changePage"></Page>
      </div>
    </div>
  </section>
</template>
<script>
import { getAllUserList, selectUserList } from '../../api/api';
export default {
  data() {
    return {
      columns1: [
        {
          title: "id",
          key: "id",
        },
        {
          title: "用户名",
          key: "username",
        },
				{
          title: "角色",
          key: "role",
        },
				{
          title: "创建时间",
          key: "time",
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render (row, column, index) {
            return `<i-button type="primary" size="small">查看</i-button> <i-button type="error" size="small">删除</i-button>`;
          }
        }
      ],
      userList: [
        {
          id: 0,
					username: 12345678901,
					role: '用户',
					time: '2022-4-24'
        }
      ],
      page: 1,
      pageSize: 1,
      total: 1
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getAllUserList().then(res => {
        console.log('获取用户数据', res);
        this.total = res.data.data.length;
        selectUserList(this.page, this.pageSize).then(res => {
          this.userList = res.data.data;
          console.log('成功查询用户数据', res);
        })
      })
    },
    changePage(e) {
      this.page = e;
      this.getData();
    }
  }
};
</script>

<style lang="scss" scoped>
.ivu-table-wrapper /deep/ {
	width: 100% !important;

	.ivu-table-header table, .ivu-table-body table, .ivu-table-tip table {
		width: 100% !important;
		table-layout: auto;
	}
  td {
    height: 20px;
  }
}
</style>